import React, {Component} from 'react';
import {Popover, Icon} from 'antd-mobile';
import PropTypes from 'prop-types'

class FloatingActionButton extends Component {
    state = {
        visible: false
    };
    onSelect = (opt) => {
        console.log("onSelect---> ss ", this.props.onSelect);
        if (this.props.onSelect) {
            this.props.onSelect(opt);
        }
        this.setState({visible: false});
    };
    handleVisibleChange = (visible) => {
        if (this.state.visible !== visible) {
            this.setState({
                visible,
            });
        }
    };

    render() {
        const {overlay} = this.props;
        return (<div>
            <div className="floating-action-side-bar">
                <Popover mask
                         placement="topRight"
                         overlayClassName="fortest"
                         overlayStyle={{color: 'currentColor'}}
                         visible={this.state.visible}
                         overlay={overlay}
                         align={{
                             overflow: {adjustY: 0, adjustX: 0},
                             offset: [-10, 0],
                         }}
                         onVisibleChange={this.handleVisibleChange}
                         onSelect={this.onSelect}
                >
                    <div style={{padding: '5px 47px 0 0'}}>
                        <div className="floating-action-button bubble left ">
                            <Icon type="ellipsis"/>
                        </div>
                    </div>
                </Popover>
            </div>

            <style type="text/css">{`
                    .floating-action-side-bar {
                        width: 44px;
                        position: fixed;
                        bottom: 10px;
                        right: 20px;
                        font-size: 0;
                        line-height: 0;
                        z-index: 100;
                    }

                    .floating-action-button {
                      margin: 5px auto;
                      position: relative;
                      font-size: 5px;
                      color: #fff;
                      padding: 4px;
                      width: 44px;
                      height: 44px;
                      overflow: hidden;
                      text-align: center;
                      cursor: pointer;
                      display: inline-block;
                      border-radius: 50%;
                      line-height: 60px;
                      text-transform: uppercase;
                    }
                    .floating-action-button:nth-of-type(1) {
                      background-color: #2ecc71;
                    }
                    .floating-action-button:nth-of-type(2) {
                      background-color: #3498db;
                    }
                    .floating-action-button:nth-of-type(3) {
                      background-color: #e74c3c;
                    }
                    .floating-action-button:nth-of-type(4) {
                      background-color: #1abc9c;
                    }
                    .floating-action-button.left:after {
                      left: 0;
                    }
                    .floating-action-button.right:after {
                      right: 0;
                    }

                    .floating-action-button.bubble:after {
                      content: "";
                      background: #fff;
                      position: absolute;
                      width: 44px;
                      height: 44px;
                      left: 0;
                      right: 0;
                      top: 0;
                      bottom: 0;
                      opacity: 0;
                      margin: auto;
                      border-radius: 50%;
                      transform: scale(1);
                      transition: all 0.75s ease-in-out;
                    }
                    .floating-action-button.bubble:active:after {
                      transform: scale(0);
                      opacity: 1;
                      transition: 0s;
                    }
                    `
            }
            </style>
        </div>);
    }
}

FloatingActionButton.propTypes = {
    overlay: PropTypes.array,
    onSelect: PropTypes.func
};

export default FloatingActionButton;